<template>
  <section>
    <el-row>
      <el-button size="mini" type="primary" @click="finishReportBtn(report)" style="float: right">完成报告</el-button>
    </el-row>
    <el-row class="page-row">
      <section class="pages-container" v-if="report !== null">
        <div v-for="(page,index) of report.reportPages" :class="{ 'active': selPage && selPage.id === page.id }" @click.stop="selPageEvt(page)" :key="page.id" class="page-item">
          <span class="page-number">{{index+1}}</span>
          <div class="btn-del">×</div>
        </div>
        <div class="page-item add-item" @click.stop="createPage">
          <icon name="plus" scale="2"></icon>
        </div>
      </section>
    </el-row>
    <el-row v-if="selPage">
      <div class="page-container">
        <div class="page-toolbar">
          <el-pagination
            small
            background
            layout="prev, pager, next"
            :pager-count="5"
            :current-page="widgetData.currPage"
            :page-count="widgetData.totalPages"
            @current-change="currPageChange">
          </el-pagination>
          <!-- 这里显示 所有关键，目前挂件在客户端实现 -->
          <widget-ctl :widgetData="widgetData" :type="'conf'" @done="confDone"></widget-ctl>
        </div>
        <div class="page-editor">
          <div class="page-toolbar">
            <span>[{{selPage.data.title}}] -> 设置-></span>
            <span @click.stop="showConf"><icon name="cog" class="page-setting"></icon></span>
          </div>
          <div class="editor-box" :style="{backgroundImage:'url('+selPage.data.background+')',backgroundSize:'cover',backgroundRepeat:'no-repeat'}">
            <widget-ctl :widgetData="selPage.data" :reportData="reportData" :type="'page'" @done="confDone"></widget-ctl>
          </div>
        </div>
      </div>
      <el-dialog title="配置页面参数"
        :visible.sync="showConfDialog" width="48%">
        <el-form style="margin:15px 0;">
          <el-form-item label="页标题">
            <el-input size="small" v-model="selPage.data.title"></el-input>
          </el-form-item>
          <el-form-item label="背景图:">
            <el-input size="small" v-model="selPage.data.background">
              <template slot="append">URL地址</template>
            </el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="showConfDialog = false">取消</el-button>
          <el-button type="primary" @click="submitConf">确定</el-button>
        </span>
      </el-dialog>
    </el-row>
  </section>
</template>

<script>
  import {mapGetters, mapActions, mapMutations} from 'vuex'
  import Vue from 'vue'
  import draggable from 'vuedraggable'
  import WidgetCtl from "./widget/index";
  import errHandler from '@/assets/errHandler.js'

  export default {
    components: {
      WidgetCtl,
      draggable
    },
    name: 'report-create-page',
    data() {
      return {
        reportDataId: null,
        reportData:null,
        report:null,
        selPage:null,
        showConfDialog:false,
        widgetData:{widgets:[]},
      }
    },
    computed: {
      ...mapGetters(['department']),
    },
    created() {
      // console.log(this.$route)
      //加载挂件数据
      this.loadWidgets(0)
      this.reportDataId = this.$route.params.reportDataId
      this.getReportData(this.reportDataId)

    },
    methods:{
      ...mapActions({
        fetch: 'fetch'
      }),
      selPageEvt(page){
        this.initReportPage(page)
        this.selPage = page
      },
      currPageChange(p){
        this.loadWidgets(p-1)
      },
      loadWidgets(page){
        this.fetch({name:'getWidgets',data:{page,size:15}})
          .then(res=>{
            console.log(res)
            Vue.set(this.widgetData,'currPage',res.number+1)
            Vue.set(this.widgetData,'totalPages',res.totalPages)
            this.widgetData.widgets.splice(0,this.widgetData.widgets.length)
            res.content.forEach(w=>{
              this.widgetData.widgets.push(w)
            })
          }).catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
        })
      },
      createPage(e){
        this.fetch({name:'createReportPage',data:{reportId:this.report.id,title:'...'}})
          .then(res=>{
            console.log(res)
            this.report.reportPages.push(res)
          }).catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
        })
      },
      getReportData(id){
        this.fetch({name:'getReportData',data:{id}})
          .then(res=>{
            this.reportData = res
            console.log(res)
            if(this.reportData.data.reportId){//获取
              this.getReport(this.reportData.data.reportId)
            }else {//创建
              this.createReport(this.reportData.customerName+'- 中医体检报告',this.reportData.id)
            }
          }).catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
        })
      },
      getReport(id){
        this.fetch({name:'getReport',data:{id}})
          .then(res=>{
            console.log(res)
            this.report = res
            this.reportData.report = res
            //默认选中
            if(this.report.reportPages && this.report.reportPages.length>0){
              this.selPage = this.report.reportPages[0]
              this.initReportPage(this.selPage)
            }
          }).catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
        })
      },
      createReport(title,reportDataId){
        this.fetch({name:'createReportByReportData',data:{title,reportDataId}})
          .then(res => {
            console.log(res)
            this.report = res
            //默认选中
            if(this.report.reportPages && this.report.reportPages.length>0)
              this.selPage = this.report.reportPages[0]
            if(this.selPage)
              this.initReportPage(this.selPage)
          }).catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
        })
      },
      initReportPage(page){
        //console.log('----------page--------',page)
        //data:{title:'',background:'',widgets:[]}
        if(!page.data)
          Vue.set(page,'data',{})
        if(!page.data.title)
          Vue.set(page.data,'title','')
        if(!page.data.background)
          Vue.set(page.data,'background','')
        if(!page.data.widgets)
          Vue.set(page.data,'widgets',[])
      },
      submitConf(e){
        this.showConfDialog = false
        this.confDone(null)
      },
      showConf(e){
        this.showConfDialog = true
      },
      confDone(p){
        console.log('看看widget能不能到这')
        //保存当前页面
        this.fetch({name:'saveReportPage',
          data:{id:this.selPage.id,title:this.selPage.data.title,data:JSON.stringify(this.selPage.data)},
          method:'post'})
          .then(res=>{
            this.selPage.data = res.data
          }).catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
        })
      },
      finishReportBtn(row){
        this.$confirm('完成后不能再修改问卷,请确认是否完成报告?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.finishReport(row)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });
        });
        console.log(row)
      },
      finishReport(row){
        this.fetch({name:'finishReport',data:{id:row.id}})
          .then(res=>{
            console.log(res)
            this.$message({
              type: 'success',
              message: '报告已完成!'
            });
          }).catch(err=>{
          console.log(err)
          errHandler.handle(this,err)
        })
      }
    }
  }
</script>

<style lang="scss">
  /* 210mm×297mm */
  .page-container{
    box-sizing:border-box;
    margin-top:15px;
    display: flex;
    flex-direction: row;
    overflow: auto;
    .page-toolbar{
      border:1px solid #e4e4e4;
      padding:4px;
      width:268px;
    }
    .page-editor{
      border:1px solid #e4e4e4;
      margin-left:10px;
      width:850px;
      .page-toolbar{
        height:24px;
        line-height:24px;
        width:840px;
        background-color: #eeeeee;
        .page-setting{
          float:right;
          color:#666;
          cursor: pointer;
          &:after{clear:both;}
        }
      }
      .editor-box{
        height:1188px;
      }
    }
  }

  .page-row{
    padding-bottom: 10px;
    border-bottom: 1px solid #e4e4e4;
    .page-item{
      float: left;
      box-sizing: border-box;
      margin: 10px 5px;
      position: relative;
      width: 48px;
      height: 48px;
      border: 1px solid darkgrey;
      cursor: pointer;

      &:hover{
        border: 1px solid #8391a5;
        transition: all .2s ease;
        box-shadow: grey 0 0 6px 0;
        .btn-del{
          display: inline;
        }
      }
      &.active{
        box-shadow: #4db3ff 0 0 6px 0;
      }
      .page-number{
        color: darkgrey;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        transition: all .2s ease;
        font-size: 3em;
      }
      .btn-del {
        display: none;
        position: absolute;
        background-color: #f56c6c;
        border-radius: 10px;
        color: #fff;
        width: 20px;
        height: 20px;
        line-height: 18px;
        text-align: center;
        font-size: 20px;
        overflow: hidden;
        top: -10px;
        right: -10px;
        padding: 0;
        opacity: 0.6;
        &:hover {
          opacity: 1;
        }
      }
      &.add-item{
         border: 1px dashed darkgrey;
         .fa-icon{
           fill: darkgrey;
           position: absolute;
           top: 50%;
           left: 50%;
           transform: translate(-50%, -50%);
           transition: all .2s ease;
         }
         &:hover{
           border: 1px solid #8391a5;
           .fa-icon{
             fill: #8391a5;
           }
         }
      }
    }
  }
</style>
